<template>
  <view class="f-user">
    <view class="user-info rbox box_y_center">
      <view class="avatar"></view>
      <view class="info cbox boxf_1">
        <view class="head rbox box_space_b box_y_center">
          <text class="name">王慧医生</text>
          <text class="tag rbox box_center">认证医师</text>
        </view>
        <text class="addr">北京 北京市</text>
      </view>
    </view>

    <view class="my-cates-wrap rbox">
      <view
        class="item cbox boxf_1 box_y_center"
        v-for="(item, idx) in catesList"
        :key="idx"
        @tap="goPage(item.link)"
      >
        <image class="icon" :src="item.img" mode="aspectFill"></image>
        <text class="rbox">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  components: {
  },
  data() {
    return {
      catesList: [
        {
          img: '/static/icon04.png',
          link: 'reportHandle',
          name: '上报处理'
        },
        {
          img: '/static/icon05.png',
          link: 'quizShow',
          name: '帖子回复'
        },
        {
          img: '/static/icon06.png',
          link: 'diagnosisHandle',
          name: '诊断处理'
        },
        {
          img: '/static/icon07.png',
          link: 'myFarmer',
          name: '我的农户'
        }
      ],

    }
  },
  methods: {
    goPage(url) {
      if (url) {
        wx.navigateTo({
          url: `/pages/${url}/${url}`
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.f-user {
  padding: 80rpx 42rpx 50rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
  .user-info {
    padding: 0 40rpx;
    .avatar {
      width: 124rpx;
      height: 124rpx;
      background-color: #e8d9d9;
      border-radius: 50%;
    }
    .info {
      margin-left: 20rpx;
      .head {
        .name {
          font-size: 36rpx;
          line-height: 1;
          color: #5a5a5a;
        }
        .tag {
          width: 148rpx;
          height: 50rpx;
          font-size: 24rpx;
          color: #fff;
          background: #1de1c3;
          border: 1px solid #e8e8e8;
          border-radius: 24rpx;
        }
      }
      .addr {
        margin-top: 20rpx;
        font-size: 32rpx;
        line-height: 1;
        color: #5a5a5a;
      }
    }
  }

  .my-cates-wrap {
    margin-top: 30rpx;
    padding: 30rpx 0;
    border-radius: 20rpx;
    background: #fff;
    .item {
      .icon {
        width: 78rpx;
        height: 78rpx;
        border-radius: 50%;
      }
      text {
        margin-top: 20rpx;
        font-size: 28rpx;
        line-height: 1;
        color: #5a5a5a;
      }
    }
  }
}
</style>
